import React, { useState, useEffect } from "react";
import axios from "axios";
import style from "./index.module.scss";
import { useNavigate } from "react-router-dom";
import { List } from "react-vant";
import { Arrow } from "@react-vant/icons";
import { finished } from "stream";
const Index = () => {
  const navigate = useNavigate();
  const [allData, setAllData] = useState<any>([]);
  //获取列表
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [findished, setFindished] = useState(false);
  //加载数据的函数
  const onLoad = async () => {
    const res = await axios.get("/api/date", {
      params: {
        pageSize,
        currentPage,
      },
    });
    const { data, code } = res.data;
    if (code === 200) {
      //修改页码+1
      setCurrentPage(currentPage + 1);
      //合并数据
      setAllData([...allData, ...data]);
      console.log(data);
    } else {
      setFindished(true); //数据加载完成
    }
  };
  //组件挂载时加载初始数据
  useEffect(() => {}, []);

  //点击跳转详情页
  const xq = (id: any) => {
    console.log(id);
    navigate(`/kepuhaoxq/${id}`);
  };

  return (
    <div>
      <List finished={findished} onLoad={onLoad}>
        {allData.map((item: any, index: any) => (
          <div className={style.list} key={index} onClick={() => xq(item.id)}>
            <div className={style.listitem}>
              <div>
                <img src={item.image} alt="" />
              </div>
              <div>
                <div className={style.name1}>{item.name}医生的科普号</div>
                <span>
                  {item.name} {item.type} {item.keshi} {item.hospital}
                </span>
              </div>
              <div>
                <Arrow />
              </div>
            </div>
          </div>
        ))}
      </List>
    </div>
  );
};

export default Index;
function handleScoll(this: Window, ev: Event) {
  throw new Error("Function not implemented.");
}
